<template>
    <section class="wrapped">
        <!-- 订单统计 -->
        <el-row :gutter="10">
            <el-col :span="6" >
                <div class="hint-item hint-item-bg01 _display_flex">
                    <icon class-name="icondaifukuan" size="50px" color="#fff"></icon>
                    <div class="hint-item-r _display_flex">
                        <div class="r-nth-child">88</div>
                        <div>待付款</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" >
                <div class="hint-item hint-item-bg02 _display_flex">
                    <icon class-name="icondaifahuo" size="50px" color="#fff"></icon>
                    <div class="hint-item-r _display_flex">
                        <div class="r-nth-child">88</div>
                        <div>待发货</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" >
                <div class="hint-item hint-item-bg03 _display_flex">
                    <icon class-name="icongouwuche" size="50px" color="#fff"></icon>
                    <div class="hint-item-r _display_flex">
                        <div class="r-nth-child">88</div>
                        <div>购物车</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" >
                <div class="hint-item hint-item-bg04 _display_flex">
                    <icon class-name="icondaipingjia" size="50px" color="#fff"></icon>
                    <div class="hint-item-r _display_flex">
                        <div class="r-nth-child">88</div>
                        <div>待评价</div>
                    </div>
                </div>
            </el-col>
        </el-row>   
        <!-- 实时统计      -->
        <el-card class="wrapped statistics-bar">
            <div slot="header">
                <span class="statistics-title"><icon class-name="iconshishi" color='#1296db'></icon>实时统计</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-card>
                        <div slot="header">实时营业额</div>
                        <div class="statistics-content">
                            <div class="content-num wrapped">0</div>
                            <el-row class="content-base _display_flex" :gutter="10">
                                <el-col :span="8">昨天营业额：0</el-col>
                                <el-col :span="8">本月营业额：0</el-col>
                                <el-col :span="8">累计营业额：0</el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card>
                        <div slot="header">实时订单数</div>
                        <div class="statistics-content">
                            <div class="content-num wrapped">0</div>
                            <el-row class="content-base _display_flex" :gutter="10">
                                <el-col :span="8">昨天营业额：0</el-col>
                                <el-col :span="8">本月营业额：0</el-col>
                                <el-col :span="8">累计营业额：0</el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card>
                        <div slot="header">实时访客数</div>
                        <div class="statistics-content">
                            <div class="content-num wrapped">0</div>
                            <el-row class="content-base _display_flex" :gutter="10">
                                <el-col :span="8">昨天营业额：0</el-col>
                                <el-col :span="8">本月营业额：0</el-col>
                                <el-col :span="8">累计营业额：0</el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
        <!-- 统计数据可视化 -->
        <el-card class="wrapped chart-bar">
            <div slot="header">
                <span class="statistics-title"><icon class-name="icontongji" color='#1296db'></icon>近七天交易额统计</span>
                <div class="chart-switch">
                    <span class="switch-icon" @click="switchEcharts('line')"><icon class-name="icontongji2"></icon></span>
                    <span class="switch-icon" @click="switchEcharts('bar')"><icon class-name="icontongji1"></icon></span>
                </div>
            </div>
            <div ref="echarts" class="echarts"></div>
        </el-card>
    </section>
</template>

<script>

export default {
    name: 'Index',
    title: '首页',
    methods: {
        // 折线图
        getOptionLine(dataX, dataY){
            let option = {
                xAxis: {
                    type: 'category',
                    data: dataX, 
                    axisLabel: {
                        margin: 20,
                        color: '#666',
                        fontSize: 12
                    },
                    boundaryGap: false            
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#1296db',
                        fontSize: 16,
                        formatter: (value) => {
                            return value > 0 ?`${value}万`:value
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#999"
                        }
                    }
                },
                tooltip: {
                    formatter: '交易额: {c}'
                },
                series: [{
                        name: '成交额',
                        data: dataY,
                        type: 'line',
                        smooth: true,
                        symbolSize: 8,
                        itemStyle: {
                            color: '#1296db',
                        },
                        lineStyle: {
                            width: 3
                        },
                    }]
            };
            return option
        },
        // 柱状图
        getOptionBar(dataX, dataY) {
            let option = {
                grid: {
                    left: '6%',
                    right: '6%'
                },
                xAxis: {
                    type: 'category',
                    data: dataX, 
                    axisLabel: {
                        margin: 20,
                        color: '#666',
                        fontSize: 12
                    },
                    boundaryGap: true     
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#1296db',
                        fontSize: 16,
                        formatter: (value) => {
                            return value > 0 ?`${value}万`:value
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#999"
                        }
                    }
                },
                tooltip: {
                    formatter: '交易额: {c}万'
                },
                series: [{
                    data: dataY,
                    type: 'bar',
                    itemStyle: {
                        color: '#1296db'
                    },
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 18
                    },
                    barMaxWidth: '40%',
                    barMinWidth: 50,
                }]
            }
            return option
        },
        // 图形
        EchartsBar() {
            let dataX = ['2020-04-22', '2020-04-23', '2020-04-24', '2020-04-25', '2020-04-26', '2020-04-27', '2020-04-28']
            let dataY = [820, 932, 901, 934, 1290, 1330, 1320]
            let option = this.echartsType === 'line'? this.getOptionLine(dataX, dataY) : this.getOptionBar(dataX, dataY)
            let echart = this.$echarts.init(this.$refs.echarts)
            echart.setOption(option);
        },
        // 图形切换
        switchEcharts(type) {
            this.echartsType = type
            this.EchartsBar()
        }
    },
    data() {
        return {
            echartsType: 'line',                      // line，bar
        }
    },
    mounted() {
        this.EchartsBar()
    },
}
</script>

<style lang="scss" scoped>
    .hint-item{
        width: 100%;
        height: 100px;
        border-radius: 5px;
        color: $text-color;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: $font-size-sm;
        &.hint-item-bg01{
            background: $color-primary;
        }
        &.hint-item-bg02{
            background: $color-success;
        }
        &.hint-item-bg03{
            background: $color-warning;
        }
        &.hint-item-bg04{
            background: $color-error;
        }
        &.hint-item-bg05{
            background: $color-minor;
        }
        .hint-item-r{
            flex: 1;
            width: 100%;
            justify-content: center;
            flex-direction: column;
            .r-nth-child{
                font-size: $font-size-lx;
            }
        }
    }
    .statistics-bar{
        margin-top: 20px;
        .statistics-title{
            font-weight: bold;
        }
        .statistics-content{
            .content-num{
                padding: 10px 0;
                text-align: center;
                font-size: $font-size-lx;
                color: $text-color-inverse;
            }
            .content-base{
                padding-top: 20px;
                font-size: $font-size-sm;
                text-align: center;
            }
        }
    }
    .chart-bar{
        margin-top: 20px;
        position: relative;
        .echarts{
            width: 100%;
            height: 320px;
        }
        .chart-switch{
            float: right;
            .switch-icon{
                cursor: pointer;
            }
        }
    }
</style>